<template>
    <div class="w100" style="background-color: #f6f6fa; height: 100vh">
        <el-container style="width: 100%; height: 100%">
            <el-header class="df jc-sb ai-c">
                <div>
                    <img src="../../assets/home2/logo.png" alt="" style="cursor: pointer" />
                </div>

                <el-popover placement="bottom" trigger="hover" style="margin: 0; padding: 0 !important">
                    <el-button style="margin: 0; padding: 10px 12px; width: 100%" @click="to_login">退出登录</el-button>
                    <div slot="reference" class="userimg"></div>
                </el-popover>
            </el-header>
            <el-container class="containers">
                <el-aside>
                    <div style="" class="df fd-c jc-sb ai-c left-top">
                        <h2>晓旭</h2>
                        <span>销售经理</span>
                        <div class="df jc-sb w100 ai-c">
                            <span class="df fd-c">
                                <span>编号</span>
                                <span>007</span>
                            </span>
                            <span class="lineBottom"></span>
                            <span class="df fd-c">
                                <span>积分</span>
                                <span>100</span>
                            </span>
                        </div>
                    </div>
                    <menu2></menu2>
                    <div class="aside-bottom"></div>
                </el-aside>
                <el-main class="df jc-sb" v-if="
                    $route.path == '/homepage' ||
                    $route.path == '/warn' ||
                    $route.path == '/unreadTable' ||
                    $route.path == '/recently' ||
                    $route.path == '/visualization'
                ">
                    <div class="l">
                        <ul class="l-top df w100" style="margin-bottom: 30px">
                            <div class="num" v-if="num > 0">{{ num }}</div>
                            <li v-for="(item, index) in tabList" :key="index" class="f1 d-center"
                                @click="tabs(item.name, index)" :class="index == tab_top ? 'li-hover' : ''">
                                {{ item.name }}
                            </li>
                        </ul>
                        <div class="l-content" style="height: 100%">
                            <router-view></router-view>
                        </div>
                    </div>
                    <div class="r">
                        <img src="../../assets/home2/1.png" alt="" style="width: 100%; height: 100%" />
                    </div>
                </el-main>

                <el-main v-else class="df jc-sb">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import Images from "@/components/images.vue";
import { PatchFlags } from "@vue/shared";
import menu2 from "./menu2.vue";
export default {
    name: "",
    components: { menu2, Images },
    data() {
        return {
            path: "ws://222.92.133.154:5912/websocket/ww",
            socket: "",
            num: "",
            tabList: [
                {
                    name: "首页",
                    path: "/homepage",
                },
                {
                    name: "重要事项提醒",
                    path: "/warn",
                },
                {
                    name: "未读报表",
                    path: "/unreadTable",
                },
                {
                    name: "最近浏览",
                    path: "/recently",
                },
                {
                    name: "可视化报表",
                    path: "/visualization",
                },
            ],
            tab_top:''
        };
    },

    created() {
        if(this.$route.path==='/homepage'){
              this.tab_top=0
              console.log(this.tab_top,'%%%%%');
            }
            if(this.$route.path==='/warn'){
              this.tab_top=1
              console.log(this.tab_top,'%%%%%');
            }
            if(this.$route.path==='/unreadTable'){
              this.tab_top=2
              console.log(this.tab_top,'%%%%%');
            }
            if(this.$route.path==='/recently'){
              this.tab_top=3
              console.log(this.tab_top,'%%%%%');
            }
            if(this.$route.path==='/visualization'){
              this.tab_top=4
              console.log(this.tab_top,'%%%%%');
            }
        
        // this.tab_top = 0
        // if (localStorage.getItem("tab_top")) {
        //     this.tab_top = localStorage.getItem("tab_top");
        // } else {
        //     this.tab_top = 0;
        //     localStorage.setItem("tab_top", 0);
        // }
    },
    mounted() {

        // this.tab_top = 0
        // 初始化
        this.init();
    },
    methods: {

        getPath(){
           console.log(this.route.path,'@@@@');
        },

        init: function () {
            if (typeof WebSocket === "undefined") {
                alert("您的浏览器不支持socket");
            } else {
                // 实例化socket
                this.socket = new WebSocket(this.path);
                // 监听socket连接
                this.socket.onopen = this.open;
                // 监听socket错误信息
                this.socket.onerror = this.error;
                // 监听socket消息
                this.socket.onmessage = this.getMessage;
            }
        },
        open: function () {
            // console.log("socket连接成功",'66666')
        },
        error: function () {
            // console.log("连接错误")
        },
        getMessage: function (msg) {
            // console.log(msg.data,msg.data.number)
            // console.log(msg.data,'3333');
            // console.log(msg,'1111');
            this.num = msg.data;
        },
        send: function () {
            this.socket.send(params);
        },
        close: function () {
            // console.log("socket已经关闭")
        },
        tabs(n, index) {
            this.tab_top = index;
            // localStorage.setItem("tab_top", index);

            if (n === "首页") {
                this.$router.push("/homepage");
                sessionStorage.setItem("keyPath", "/homepage");
            } else if (n === "重要事项提醒") {
                this.$router.push("/warn");
                sessionStorage.setItem("keyPath", "/warn");
            } else if (n === "未读报表") {
                this.$router.push("/unreadTable");
                sessionStorage.setItem("keyPath", "/unreadTable");
            } else if (n === "最近浏览") {
                this.$router.push("/recently");
                sessionStorage.setItem("keyPath", "/recently");
            } else if (n === "可视化报表") {
                this.$router.push("/visualization");
                sessionStorage.setItem("keyPath", "/visualization");
            }

        },

        to_login() {
            //退出登录
            localStorage.removeItem("token");
            this.$router.push("/login2");
        },
    },

};
</script>
<style scoped lang='scss'>
.left-top {
    text-align: center;
    padding: 40px 0;
    box-sizing: border-box;
    margin: 5px 0;
    box-shadow: 0 0 5px 0 #39f;
    width: 98%;
    height: 200px;
    background: #ffffff;
    border-radius: 20px;
    margin-left: 1%;

    h2 {
        font-weight: 700;
        cursor: pointer;
    }

    span {
        cursor: pointer;
    }

    >span {
        width: 50%;
        border: 1px solid #39f;
        padding: 1px 5px;
        color: #39f;
        border-radius: 5px;
    }

    >div {
        padding: 0 50px;

        .lineBottom {
            width: 1px;
            height: 30px;
            border-left: 3px solid #999;
        }
    }
}

.containers {
    height: calc(100% - 60px);
    overflow: hidden;
}

.el-aside {
    width: 200px !important;

    // .aside-bottom {
    //     width: 100%;
    //     height: 200px;
    //     // background-color: red;
    //     background-image: linear-gradient(transparent, red);
    // }
}

.el-main {
    height: 100%;
    // height: calc(100% - 60px);
    overflow: hidden;

    .l {
        width: 75%;
        // border: 1px solid #000;
        height: 100%;
        float: left;
        display: flex;
        flex-direction: column;
        padding: 0 15px;
        box-sizing: border-box;

        .l-top {
            height: 60px;
            padding: 0 20px;
            box-sizing: border-box;
            border-radius: 60px;
            background-color: #3c6cfe;
            position: relative;

            li {
                color: #fff;
                cursor: pointer;
                height: 60px;
                border-radius: 5px;
            }

            .num {
                width: 30px;
                height: 30px;
                background-color: red;
                position: absolute;
                left: 495px;
                top: 0;
                color: #fff;
                text-align: center;
                line-height: 30px;
                border-radius: 50%;
            }

            .li-hover {
                background-color: #ffb302;
                box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.385);
            }
        }

        .l-content {
            // border-bottom: 10px solid #000;
        }
    }

    .r {
        width: 25%;
        // border: 1px solid #000;
        height: 100%;
        float: left;
    }
}

.el-header {
    padding: 0 25px;
    box-sizing: border-box;

    .userimg {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: #000;
        cursor: pointer;
        background: url(../../assets/login/home_user.png) no-repeat;
        background-size: 100% 100%;
    }
}

.el-popover {
    padding: 0px !important;
}

* {
    margin: 0;
    padding: 0;
}
</style>


<style>
#app {
    width: 100%;
    height: 100%;
    font-size: 16px !important;
}
</style>


<style>
*::-webkit-scrollbar {
    width: 4px;
    height: 8px;
    background-color: transparent;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {
    background-color: #fff !important;
    /* background-color: rgba(117, 116, 116, 0.3); */
}

/*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
    /* background-color: transparent; */
    background-color: rgba(90, 90, 90, 0.3) !important;

    border-radius: 6px;
}

/*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar {
    display: none;
}

.scrollbarShow::-webkit-scrollbar {
    display: block;
}
</style>